<#assign basePath=request.contextPath />

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权限管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

	<#include '/common/common-css.html'>
	<!-- ztree -->
	<link rel="stylesheet" href="${basePath}/js/plugins/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    
   	<style type="text/css">
    div#rMenu {position:absolute; visibility:hidden; top:0; text-align: left;padding:4px;}
    div#rMenu a{
        padding: 3px 15px 3px 15px;
        background-color:#cad4e6;
        vertical-align:middle;
    }
    
</style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>权限<small> 管理</small></h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a href="javascript: location.replace(location.href);">
                                <i class="fa fa-refresh"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                    	<div class="row">
                    		<div class="col-md-3 col-md-offset-1 b-r">
                    			<ul id="tree" class="ztree"></ul>
                    		</div>
                    		<div class="col-md-6">
                    			<form class="form-horizontal m-t" id="myForm">
		                            <div class="form-group-sm">
		                                <label class="col-sm-3 control-label"><sapn class="text-danger">* </sapn>id：</label>
		                                <div class="col-sm-8">
		                                    <input id="id" name="id" class="form-control" type="text">
		                                    <span class="help-block m-b-none">
		                                    </span>
		                                </div>
		                            </div>
		                            <div class="form-group-sm">
		                                <label class="col-sm-3 control-label"><sapn class="text-danger">* </sapn>菜单/权限名称：</label>
		                                <div class="col-sm-8">
		                                    <input id="name" name="name" class="form-control" type="text">
		                                    <span class="help-block m-b-none">
		                                    </span>
		                                </div>
		                            </div>
		                            <div class="form-group-sm">
		                  				<label class="col-sm-3 control-label"><sapn class="text-danger">* </sapn>类型：</label>
		                                <div class="col-sm-8">
		                                    <select class="form-control m-b" name="type" id="type">
		                                        <option value="permission">权限</option>
		                                        <option value="menu">菜单</option>
		                                    </select>
		                                </div>
		                            </div>
		                            <div class="form-group-sm" id="percodeDiv">
		                                <label class="col-sm-3 control-label"><sapn class="text-danger">* </sapn>菜单/权限标识：</label>
		                                <div class="col-sm-8">
		                                    <input id="percode" name="percode" class="form-control" type="text">
		                                    <span class="help-block m-b-none">
		                                    </span>
		                                </div>
		                            </div>
		                            <div class="form-group-sm" id="linkDiv">
		                                <label class="col-sm-3 control-label"><sapn class="text-danger">* </sapn>链接：</label>
		                                <div class="col-sm-8">
		                                    <input id="link" name="link" class="form-control" type="text">
		                                    <span class="help-block m-b-none">
		                                    </span>
		                                </div>
		                            </div>
		                            <div class="form-group-sm">
		                                <label class="col-sm-3 control-label"><sapn class="text-danger">* </sapn>pId：</label>
		                                <div class="col-sm-8">
		                                    <input id="pId" name="pId"  class="form-control" type="text">
		                                    <span class="help-block m-b-none">
		                                    </span>
		                                </div>
		                            </div>
		                            <div class="form-group-sm">
		                                <label class="col-sm-3 control-label"><sapn class="text-danger">* </sapn>菜单图标：</label>
		                                <div class="col-sm-8">
		                                    <input id="css" name="css" class="form-control" type="text">
		                                    <span class="help-block m-b-none">
		                                    </span>
		                                </div>
		                            </div>
		                            <div class="form-group-sm">
		                                <div class="col-sm-8 col-sm-offset-3">
		                                    <a class="btn btn-primary btn-sm" type="submit" id="submit" onclick="javascript:void(0);">提交</a>
		                                </div>
		                            </div>
		                        </form>
                    		</div>
                    	</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div id="modal-form" class="modal fade" aria-hidden="true">
        <div class="modal-dialog" style="width : 300px">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="control-label">节点名称：</label>
                                <input type="text" name="" id="nodeName" placeholder="请输入节点名称" class="form-control">
                            </div>
                            <div>
                            	<a class="btn btn-sm btn-primary pull-right m-t-n-xs" href="javascript:void(0);" id="addNode"><strong>确定</strong>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div id="rMenu">  
	   <!--  <a href="#modal-form"  data-toggle="modal" class="list-group-item" onclick="addTreeNode();">增加子菜单</a>  --> 
	    <a href="#modal-form"  data-toggle="modal" class="list-group-item" onclick="hideRMenu();">增加子菜单</a>  
	    <a href="#" class="list-group-item" onclick="removeTreeNode();" id="deleteMenu">删除菜单</a>  
	</div>  
    
    <#include '/common/common-js.html'>
    <!-- ztree -->
    <script type="text/javascript" src="${basePath}/js/plugins/zTree/js/jquery.ztree.all.min.js"></script>
	<script type="text/javascript">
		var setting = {
			async: {
				enable: true,
				url: "${basePath}/permission/dataTree?t=" + Math.random(),
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onClick: onClick,
				onRightClick: OnRightClick,
				onAsyncSuccess: zTreeOnAsyncSuccess
			}
		};

		var zTree, rMenu;
		$(document).ready(function(){
			//禁用浏览器邮件菜单
			document.body.oncontextmenu = function ()
	        {
	            return false;
	        }
			
			$.fn.zTree.init($("#tree"), setting, null);
			
			
			rMenu = $("#rMenu");
			
			$("#submit").click(function(){
				$.ajax({    
			        type: "post",   
			        url: "${ basePath }/permission/save?t=" + Math.random(),  
			        data : {
			        	id : $("#id").val(),
			        	name : $("#name").val(),
			        	pId : $("#pId").val(),
			        	type : $("#type").val(),
			        	percode : $("#percode").val(),
			        	link : $("#link").val(),
			        	css : $("#css").val()
			        },
			        dataType: "json",    
			        success: function (data) { 
			        	if(data.error){
							layer.msg(data.msg,{icon:2,time:1000});
						}else{
							if(data != null){
				        		layer.msg('保存成功!',{icon:1,time:1000});
				        		zTree.reAsyncChildNodes(null, "refresh");
				        	}
						}
			        },
			        error : function(e){
			        	console.log(e);
			        }
			    })
			});
			
			
			$("#addNode").on("click", function(){
				if('' == $("#nodeName").val()){
					$("#modal-form").addClass("has-error");
				}else{
					addTreeNode($("#nodeName").val());
					$("#nodeName").val('');
					$('#modal-form').modal('hide');
				}
				
			});
		});
		
		function onClick(event, treeId, treeNode, clickFlag) {
			$("#submit").toggle(treeNode.pId != null );
			
			$("#id").val(treeNode.id).attr("disabled", "");
    		$("#name").val(treeNode.name);
   			$("#percode").val(treeNode.percode);
       		$("#link").val(treeNode.link);
       		$("#type").val(treeNode.type);
    		
    		$("#pId").val(treeNode.pId).attr("disabled", "");
    		$("#css").val(treeNode.css);
		}	
		
		function OnRightClick(event, treeId, treeNode) {
			if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
				/* zTree.cancelSelectedNode();
				showRMenu("root", event.clientX, even.clientY); */
			} else if (treeNode && !treeNode.noR) {
				$("#deleteMenu").toggle(treeNode.pId != null);
				zTree.selectNode(treeNode);
				showRMenu("node", event.clientX, event.clientY);
			}
		}

		function showRMenu(type, x, y) {
			$("#rMenu ul").show();
			if (type=="root") {
				$("#m_del").hide();
				$("#m_check").hide();
				$("#m_unCheck").hide();
			} else {
				$("#m_del").show();
				$("#m_check").show();
				$("#m_unCheck").show();
			}
			rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});

			$("body").bind("mousedown", onBodyMouseDown);
		}
		
		
		function hideRMenu() {
			if (rMenu) rMenu.css({"visibility": "hidden"});
			$("body").unbind("mousedown", onBodyMouseDown);
		}
		
		function onBodyMouseDown(event){
			if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
				rMenu.css({"visibility" : "hidden"});
			}
		}
		
		/* 增加菜单 */
		var addCount = 1;
		function addTreeNode(nodeName) {
			//hideRMenu();
			var parent = zTree.getSelectedNodes()[0];
			var newNode;
			if (parent) {
				if(parent.children != null){
					var size = parent.children.length;
					newNode = {id : parent.children[size - 1].id + 1, name : nodeName, pId : parent.id};
				}else{
					newNode = {id : parent.id + "1", name : nodeName, pId : parent.id};
				}
				zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
			} else {
				var size = zTree.getNodes().length;
				newNode = {id : zTree.getNodes()[size -1 ].id + 1, name : nodeName, pId : 0};
				zTree.addNodes(null, newNode);
			}
		}
		
		/* 删除菜单 */
		function removeTreeNode() {
			hideRMenu();
			var id = zTree.getSelectedNodes()[0].id;
			$.ajax({    
		        type: "post",   
		        url: "${ basePath }/permission/delete?t=" + Math.random(),   
		        data : {
		        	id : id
		        },
		        dataType: "json",    
		        success: function (data) { 
		        	if(data.error){
		        		layer.msg("已关联用户，不能被删除" ,{icon:2,time:1500});
		        	}else{
		        		if(data >= 0){
			        		layer.msg('删除成功!',{icon:1,time:1000});
			        		zTree.removeNode(zTree.getSelectedNodes()[0]);
			        	}else{
			        		layer.msg('删除失败!',{icon:2,time:1000});
			        	}
		        	}
		        },
		        error : function(e){
		        	console.log(e);
		        }
		    })
		}
		
		function zTreeOnAsyncSuccess(event, treeId, msg) {  
			zTree = $.fn.zTree.getZTreeObj("tree");
			zTree.expandAll(true);//全部展开  
		}
	</script>
</body>
</html>
    